<template >
    <div>
        <!-- <z-button>按钮</z-button>
        <z-button type="success" size="large">按钮</z-button>
        <z-button round>按钮</z-button>
        <z-button loading>按钮</z-button>
        <z-button icon="z-icon-caidan"></z-button>
        <z-button :loading="buttonLoading" @click="buttonClick">hl</z-button>
        <z-icon name="loading"></z-icon>
        <hr />
        <z-button-group>
            <z-button type="primary" icon="z-icon-arrow-left-bold">上一页</z-button>
            <z-button type="primary">
                下一页
                <i class="z-icon-arrow-right-bold"></i>
            </z-button>
        </z-button-group>-->
        <!-- <z-row justify="center">
            <z-col :span="6">1</z-col>
            <z-col :span="6" style="background-color: red;">2</z-col>
            <z-col :span="6" :offset="2">4</z-col>
        </z-row>

        <z-row :gutter="10">
            <z-col :span="8">5</z-col>
            <z-col :span="8">6</z-col>
            <z-col :span="8">7</z-col>
        </z-row>-->
        <!-- <z-row :gutter="10">
            <z-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                <div style="background-color: pink;">1</div>
            </z-col>
            <z-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
                <div style="background-color: red;">2</div>
            </z-col>
            <z-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
                <div style="background-color: black;">3</div>
            </z-col>
            <z-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                <div style="background-color: blue;">4</div>
            </z-col>
        </z-row>-->
        <!-- {{ checked }}
        <z-checkbox v-model="checked" @change="handleChange">zhi</z-checkbox>-->
        <!-- {{ checkboxGroup1 }}
        <z-checkbox-group v-model="checkboxGroup1" @change="handleGroup">
            <z-checkbox v-for="city in cities" :label="city" :key="city"></z-checkbox>
        </z-checkbox-group>-->
        <z-transfer v-model="rightValue" :data="transferData" :props="transferProp"></z-transfer>
    </div>
</template>


<script lang='ts'>
import { defineComponent, onMounted, reactive, ref } from 'vue'
// import { useButton } from './hook/useButton'
// import { useCheckBox } from './hook/useCheckBox'
function useTransfer() {
    const generateData = () => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
            data.push({
                key: i,
                label: `备选项 ${i}`,
                disabled: i % 4 === 0
            });
        }
        return ref(data);
    };
    return {
        transferData: generateData(),
        rightValue: [1, 4],
        transferProp: {
            key: 'key',
            label: 'label',
            disabled: 'disabled'
        }
    }
}

export default defineComponent({
    setup() {

        return {
            // ...useButton()
            // ...useCheckBox()
            ...useTransfer()
        };
    },
});
</script>